<template>
  <div class="create-left">
    <!-- 左侧数据模型列表 -->
    <div class="left-container">
      <div class="left-top">
        <div>{{ $t('dmModel.loadConnection') }}</div>
        <div class="add-btn" @click="addLink">
          <span>{{ $t('dmModel.addLink') }}</span>
          <span ref="iconPlus" class="el-icon-plus add" />
        </div>
      </div>
      <div class="model-title-container custom-scrollbar">
        <div
          v-for="(item, index) in filesList"
          :key="index"
          :class="{ 'model-title': true, active: item.isSelect }"
        >
          <div class="source-name" @click="getSheets(item)">
            <div>{{ item.dbSourceName || item.dwThreeSourceName }}</div>
            <div>
              {{
                item.type === 1 ? 'Excel' : item.type === 2 ? 'CSV' : 'MySQL'
              }}
            </div>
          </div>
          <i class="el-icon-delete" @click="delFiles(item)" />
        </div>
      </div>
      <div style="line-height: 40px">{{ $t('dmModel.surface') }}</div>
      <el-collapse v-model="activeName" accordion class="collapse">
        <el-collapse-item
          v-for="(item, i) in currentSheetsList"
          :key="i"
          :name="i"
        >
          <template slot="title">
            <div class="table-item">
              <i
                class="arrow el-icon-arrow-right"
                :class="{
                  active: activeName === i
                }"
              />
              <span class="table-name">{{ item.chooseTable }}</span>
              <span class="view">
                <i
                  class="el-icon-document-copy"
                  title="Copy table name"
                  @click.stop="copyTableName(item)"
                />
                <i
                  class="el-icon-view"
                  title="Review table data"
                  @click.stop="viewDetail(item)"
                />
              </span>
            </div>
          </template>
          <div class="field-list custom-scrollbar">
            <div
              v-for="item in fieldList"
              :key="item.fieldName"
              class="field-item"
            >
              <el-tag type="success" size="mini">{{ item.fieldType }}</el-tag>
              <span class="name">{{ item.fieldName }}</span>
            </div>
          </div>
        </el-collapse-item>
      </el-collapse>
    </div>
    <!-- 左侧栏表预览 -->
    <el-dialog :title="tablePreviewTitle" :visible.sync="showTablePreview">
      <el-table
        :data="resultList"
        max-height="400"
        border
        class="width-table custom-scrollbar"
      >
        <el-table-column
          v-if="columns.length"
          type="index"
          width="50"
          fixed="left"
          :resizable="false"
        >
          <template slot="header"><span>Num</span></template>
        </el-table-column>
        <el-table-column
          v-for="(item, index) in columns"
          :key="item + index"
          :prop="item"
          :label="item"
          :resizable="false"
          min-width="100px"
          show-overflow-tooltip
        >
          <template slot="header">
            <div class="col-tooltip">
              <el-tooltip effect="dark" :content="item" placement="top">
                <span class="col-head-span">{{ item }}</span>
              </el-tooltip>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </el-dialog>
    <!-- 添加链接弹窗 -->
    <el-dialog
      :title="$t('dmModel.selectLoadConnection')"
      :visible.sync="isShowAddLink"
      class="data-type-dialog custom-scrollbar"
      width="750px"
    >
      <div class="dialog-container">
        <el-input
          v-model="dialogKeyWord"
          :placeholder="$t('dmModel.inputKeySearch')"
          class="input-with-select"
          type="text"
        />
        <div class="tree-container">
          <dw-list :folder-list="baseDwList" @setSelectNode="setNewNode" />
        </div>
      </div>
      <span slot="footer" class="dialog-footer">
        <el-button @click="isShowAddLink = false">{{
          $t('dmModel.cancel')
        }}</el-button>
        <el-button type="primary" @click="toCreate">{{
          $t('dmModel.confirm')
        }}</el-button>
      </span>
    </el-dialog>
  </div>
</template>
<script>
import dwList from '../../components/dw-list.vue'

export default {
  components: {
    dwList
  },
  props: {
    // 文件列表
    filesList: {
      default: () => [],
      type: Array
    },
    currentSheetsList: {
      default: () => [],
      type: Array
    },
    baseDwList: {
      default: () => [],
      type: Array
    }
  },
  data() {
    return {
      showTablePreview: false,
      tablePreviewTitle: '',
      fieldList: [
        { fieldName: 'id', fieldType: 'BIGINT' },
        { fieldName: 'username', fieldType: 'VARCHAR' },
        { fieldName: 'password', fieldType: 'VARCHAR' },
        { fieldName: 'third_type', fieldType: 'TINYINT' },
        { fieldName: 'third_uid', fieldType: 'VARCHAR' },
        { fieldName: 'third_email', fieldType: 'VARCHAR' },
        { fieldName: 'real_name', fieldType: 'VARCHAR' },
        { fieldName: 'level_code', fieldType: 'INT' },
        { fieldName: 'religion', fieldType: 'INT' },
        { fieldName: 'gender', fieldType: 'TINYINT' },
        { fieldName: 'photo', fieldType: 'VARCHAR' },
        { fieldName: 'prefix_phone', fieldType: 'VARCHAR' },
        { fieldName: 'phone', fieldType: 'VARCHAR' },
        { fieldName: 'birthday', fieldType: 'DATE' },
        { fieldName: 'identification_num', fieldType: 'VARCHAR' },
        { fieldName: 'address', fieldType: 'VARCHAR' },
        { fieldName: 'ktp_url', fieldType: 'VARCHAR' },
        { fieldName: 'last_login_time', fieldType: 'TIMESTAMP' },
        { fieldName: 'verification_status', fieldType: 'INT' },
        { fieldName: 'role', fieldType: 'TINYINT' },
        { fieldName: 'status', fieldType: 'TINYINT' },
        { fieldName: 'create_time', fieldType: 'TIMESTAMP' },
        { fieldName: 'update_user', fieldType: 'VARCHAR' },
        { fieldName: 'update_time', fieldType: 'TIMESTAMP' },
        { fieldName: 'ip', fieldType: 'VARCHAR' },
        { fieldName: 'city_location', fieldType: 'VARCHAR' },
        { fieldName: 'bind_promotion_code', fieldType: 'VARCHAR' },
        { fieldName: 'skip_bind_promotion', fieldType: 'TINYINT' },
        { fieldName: 'platform_version', fieldType: 'VARCHAR' },
        { fieldName: 'device_type', fieldType: 'VARCHAR' },
        { fieldName: 'device', fieldType: 'VARCHAR' },
        { fieldName: 'backup_phone', fieldType: 'VARCHAR' }
      ],
      resultList: [
        { a: 1, b: 2, c: 3, d: 4 },
        { a: 1, b: 2, c: 3, d: 4 },
        { a: 1, b: 2, c: 3, d: 4 },
        { a: 1, b: 2, c: 3, d: 4 }
      ],
      columns: ['a', 'b', 'c', 'd'],
      dialogKeyWord: '',
      querytype: '1',
      isShowAddLink: false,
      selectNewNode: {},
      searchBar: null,
      activeName: ''
    }
  },
  watch: {
    dialogKeyWord(val) {
      clearTimeout(this.searchBar)
      this.searchBar = setTimeout(() => {
        this.$emit('getDwList', val)
      }, 500)
    }
  },
  methods: {
    openAdd() {},
    // 添加连接弹窗
    addLink() {
      this.isShowAddLink = true
      this.isAdd = false
    },
    getSheets(item) {
      this.$emit('getSheets', item)
    },
    delFiles(item) {
      this.$emit('delFiles', item)
    },
    setNewNode(node) {
      this.selectNewNode = node
    },
    toCreate() {
      if (this.selectNewNode.type === 0) {
        return
      }
      this.$emit('toCreate', this.selectNewNode)
    },
    closeNewDialog() {
      this.isShowAddLink = false
    },
    setSelectNodeLeft(node) {
      this.$emit('setSelectNodeLeft', node)
    },
    copyTableName(tableData) {
      const { dbSourceName, chooseTable } = tableData
      const input = document.createElement('input')
      document.body.appendChild(input)
      input.value = dbSourceName + '.' + chooseTable // 复制到剪切板的内容
      input.select()
      if (document.execCommand) {
        document.execCommand('copy')
        input.remove()
        this.$message.success('Copy success')
      } else {
        this.$message.error('Current browser does not support copy')
        input.remove()
      }
    },
    viewDetail(tableData) {
      const { dbSourceName, chooseTable } = tableData
      this.tablePreviewTitle = dbSourceName + '.' + chooseTable
      this.showTablePreview = true
      console.log(tableData)
    }
  }
}
</script>
<style lang="scss" scoped>
.create-left {
  width: 300px;
  height: 100%;
}
.left-container {
  width: 300px;
  border-right: 1px solid #ddd;
  padding: 0 15px;
  box-sizing: border-box;
  height: 100%;
  // min-height: calc(100vh - 86px);
  .left-top {
    display: flex;
    justify-content: space-between;
    // padding: 15px 0;
    line-height: 50px;
    font-size: 14px;
    .add-btn {
      color: #007580;
      cursor: pointer;
    }
    .add {
      font-weight: 700;
      margin-left: 5px;
    }
  }
  .type-2-container {
    display: flex;
    .type-1 {
      width: 120px;
    }
  }
  .model-title-container {
    max-height: 176px;
    overflow: auto;
  }
  .model-title {
    padding: 5px;
    margin-bottom: 10px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-left: 2px solid #bac9d3;
    &.active {
      border-left: 2px solid #1693ee;
    }
    .source-name {
      width: 66%;
      font-size: 14px;
      div:nth-child(2) {
        font-size: 12px;
        color: #ccc;
        margin-top: 5px;
      }
    }
    i {
      cursor: pointer;
    }
  }
  .drag1 {
    max-height: calc(100vh - 388px);
  }
}
.collapse {
  ::v-deep i.el-collapse-item__arrow {
    display: none;
  }
  .field-list {
    padding: 0 18px;
    height: 300px;
    overflow: auto;
    .field-item + .field-item {
      margin-top: 5px;
    }
    span.name {
      margin-left: 5px;
    }
  }
}
.table-item {
  width: 100%;
  font-size: 14px;
  user-select: none;
  .table-name {
    margin-left: 5px;
    width: 70%;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    display: inline-block;
    vertical-align: top;
  }
  i.arrow {
    transition: 0.5s all;
    &.active {
      transform: rotate(90deg);
    }
  }
  span.view {
    float: right;
    i {
      color: #007580;
      cursor: pointer;
      height: 48px;
      line-height: 48px;
      padding: 0 5px;
    }
  }
  .chose {
    padding: 10px;
    background: #ccc;
  }
  .drag2 {
    flex: 1;
  }
}
.data-type-dialog /deep/ .el-dialog {
  .el-dialog__header {
    padding: 40px;
  }
  .el-dialog__body {
    padding: 0 40px;
  }
  .tree-container {
    height: 444px;
    overflow: auto;
    margin-top: 20px;
    .tree {
      margin: 0;
    }
  }
  .el-dialog__footer {
    padding: 10px 40px 50px;
  }
  .dialog-footer {
    text-align: center;
  }
}
</style>
